import {useState} from 'react'

//创建一个函数式组件
function Counter(){

    //创建一个状态和修改修改状态的方法
    let [num,setNum] = useState(0);
   // console.log(num,setNum);true
    let [weather,setWeather] = useState(true);
    //学生的数据
    let [stuInfos,setStuInfos] = useState([{"id":1,"name":"张三",cat:{"id":100,"name":"hello"}}])
   /* function handleClick(){
    setNum(num+1);
   } */
     //处理点击事件
    let handleClick=()=>{
       setNum(num+1);
   } 

   let handleClick2=()=>{
     
       setWeather(!weather)
   }

    return(
        <div>
            <h1>函数式组件--计数器</h1>
            <h2>你点击了:{num}</h2>
            <button onClick={handleClick}>点击+1</button>
            <hr></hr>
            <h2>今天天气:{weather?"好":"差"}</h2>
            <button onClick={handleClick2}>显示天气</button>
            <hr></hr>
            <h3>显示学生的信息</h3>
            <ul>
                {
                  stuInfos.map((item)=><li key={item.id}>{item.name}---{item.cat.name}</li>)  
                }
            </ul>
            <button onClick={()=>{
                console.log("aaaa")
                let stu = {"id":2,"name":"李四",cat:{"id":101,"name":"test"}}
                console.log(stuInfos);
                setStuInfos([...stuInfos,stu]);
                
              ;
            }}>添加学生</button>
         </div>
    )
}

export default Counter 


